<template>
  <div style="padding: 10px">
    <el-row :gutter="10">
      <el-col :span="24">
        <div style="height: 120px">
          <div class="item1">
            <div style="text-align: center">
              <span style="font-size: 25px;font-weight:bold;color: #E6A23C">{{ item.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div style="margin-top: 10px;text-align: center">
              生平：<span style="color: #222">{{item.growth }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              事迹：<span style="color: #222">{{item.state }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              代表作品：<span style="color: #222">{{item.works }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              分类：<span style="color: #222">{{item.type.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <div style="margin-top: 10px">
          <div class="container" style="padding: 10px 0; border-bottom: 1px solid #ccc; color: #1E90FF; font-size: 20px;">
            <div style="color: orangered; font-size: 20px;font-weight: bold;">
              介绍
            </div>
            <div>
              <el-button v-if="state" size="mini" plain type="success" @click="collect">收藏</el-button>
              <el-button v-if="!state" size="mini" plain type="danger" @click="collect">取消收藏</el-button>
              <el-button size="mini" plain type="primary" @click="goBack">返回</el-button>
            </div>
          </div>
          <div style="margin-top: 15px" v-html="item.content"></div>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 15px">
      <div style="margin: 0 auto">
        <div style="padding: 10px 0;  border-bottom: 1px solid #ccc; color: #1E90FF; font-size: 20px;">
          <span style="font-weight: bold">评论</span>
        </div>
        <div style="margin: 20px 0">
          <div style="margin: 10px 0">
            <el-input type="textarea" placeholder="请输入留言" v-model="comment.content"></el-input>
            <div style="text-align: right; margin: 10px 0">
              <el-button type="primary" @click="submit2">提交</el-button>
            </div>
          </div>
        </div>

        <div style="margin: 20px 0">
          <div
              style="margin: 10px 0; font-size: 24px; padding: 10px 0; border-bottom: 1px solid #ccc; text-align: left">
            评论列表
          </div>

          <div style="margin: 20px 0;  text-align: left;">
            <div style="padding: 10px 0; " v-for="item in comments" :key="item.id">
              <div style="display: flex">
                <div style="width: 80px">
                  <el-avatar :size="50" :src="item.img"></el-avatar>
                </div>
                <div style="flex: 1">
                  <div style="display: flex">
                    {{ item.username }} <span style="margin-left: 10px">{{ item.time }}</span>
                  </div>
                  <div style="margin-top: 10px; color: #666">{{ item.content }}</div>
                  <div>
                    <el-button type="text" @click="reply(item.id, item.username)">回复</el-button>
                  </div>

                  <!-- 回复列表 -->
                  <div v-if="item.children.length"
                       style="margin-left: 50px; width: 72%;background-color: aliceblue; padding: 10px; border-radius: 10px">
                    <div v-for="sub in item.children" :key="sub.id">
                      <div style="padding:5px 0">
                        <div style="width: 100px;display: flex;align-items: center">
                          <el-avatar :size="40" :src="sub.img"></el-avatar>&nbsp;
                          <span style="cursor: pointer;font-weight:bold" @click="reply(sub.pid, sub.userId)">{{
                              sub.username
                            }}</span>
                        </div>
                        <br>
                        <span style="margin-left: 47px">
                        回复 <span style="color: cornflowerblue">@{{ sub.parentName }}</span>
                      <span style="color: #666;width: 100%; margin-left: 10px">{{ sub.content }}</span>
                    </span>
                        <span style="float: right; font-size: 13px; color: #666; margin-top: 3px">{{ sub.time }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <el-dialog title="回复" :visible.sync="dialogFormVisible3" width="50%">
          <el-form :model="replyComment">
            <el-form-item label="内容" >
              <el-input type="textarea" v-model="replyComment.content" style="width: 100%"></el-input>

            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="saveReply">确 定</el-button>
          </div>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ItemDetail",
  data() {
    return {
      id: this.$route.query.id,
      item: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      form: {},
      comments: [],
      comment: {
        content: ''
      },
      replyComment: {},
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      state: true,
      state2: true,
    }
  },
  created() {
    this.load()
    this.load2()

  },
  methods: {
    goBack() {
      this.$router.go(-1) // 返回上一页，相当于浏览器后退按钮
    },
    load() {
      this.$request.get("/item/" + this.id).then(res => {
        this.item = res.data
      })

      this.$request.get("/collect/repeat/" + this.id + '/' + this.user.id).then(res => {
        if (res.code === '200') {
          this.state = true;
        } else {
          this.state = false
        }
      })
    },
    collect(){
      if (this.user.username == null){
        this.$message.warning("请登录")
        return;
      }

      let data = {itemId:this.id,userId:this.user.id}
      this.$request.post("/collect", data).then(res => {
        if (res.code === '200') {
          this.state = false;
          this.$message.success("收藏成功")
        } else {
          this.state = true;
          this.$message.error(res.msg)
        }
      })
    },
    reply(pid, target) {
      if (this.user.username == null){
        this.$message.warning("请登录")
        return;
      }
      this.replyComment = {pid: pid, userId: this.user.id, itemId: this.id}
      this.dialogFormVisible3 = true
    },
    load2() {
      this.$request.get("/comment/tree", {
        params: {
          itemId: this.id,
        }
      }).then(res => {
        this.comments = res.data
      })
    },
    saveReply() {
      if (this.user.username == null){
        this.$message.warning("请登录")
        return;
      }
      this.replyComment.itemId = this.id;
      this.$request.post("/comment", this.replyComment).then(res => {
        if (res.code === '200') {
          this.$message.success("评论成功，请等待审核")
          this.replyComment = {}
          this.dialogFormVisible3 = false
          this.load2()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    submit2() {
      if (this.user.username == null){
        this.$message.warning("请登录")
        return;
      }
      if (this.comment.content === ''){
        this.$message.warning("评论内容不能为空")
        return;

      }
      this.comment.userId = this.user.id
      this.comment.itemId = this.id
      this.$request.post("/comment", this.comment).then(res => {
        if (res.code === '200') {
          this.$message.success("评论成功，请等待审核")
          this.load2()
          this.comment = {}
        } else {
          this.$message.error("评论失败")
        }
      })
    },
  }
}
</script>

<style scoped>
.item1 {
  padding: 10px;
  color: #666;
}
.collect-like {
  display: inline-block; /* 或者 flex */
  margin-left: 250px; /* 根据需要调整 */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

</style>

